@import "./util.less";

body input,
html {
  -webkit-overflow-scrolling: touch; // font: 12px/1.5  Arial,'Hiragino Sans GB','冬青黑','Microsoft YaHei', YaHei, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

article,
aside,
blockquote,
body,
button,
code,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

.disabled {
  cursor: not-allowed;
}

// 清除浮动
.clear() {
  zoom: 1;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

/*头部*/

header {
  .clear();
  padding: 30px 0;
  box-shadow: 0 5px 0px #f0f1f2;

  .header_name {
    float: left;
    font-size: 16px;
    font-family: Raleway, Hiragino Sans GB, sans-serif;
    color: #1890ff;
    width: 270px;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .header_nav {
    float: left;
    padding: 0 20px;

    ul {
      li {
        float: left;
        list-style: none;
        margin-left: 20px;

        &:hover {
          a {
            color: #1890ff;
          }
        }

        &:first-child {
          margin-left: 0;
        }

        a {
          text-decoration: none;
          color: rgba(0, 0, 0, .65);
        }
      }
    }
  }
}

/*身体*/

.section {
  margin-top: 20px;

  .section_sideNav {
    width: 270px; // height: 100%;
    position: absolute;
    overflow-y: scroll;
    bottom: 0;
    top: 107px;
    border-right: 1px solid #e9e9e9;
    box-sizing: border-box;

    li {
      padding: 20px;
      width: 100%;
      box-sizing: border-box;
      transition: all .5s ease 0s;

      &.navActive {
        background-color: #e6f7ff;
        border-right: 2px solid #1890ff;

        a {
          color: #1890ff;
        }
      }

      &:hover {
        a {
          color: #1890ff;
        }
      }

      a {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;

        span {
          font-size: 12px;
          margin-left: 6px;
          font-weight: 400;
          opacity: .67;
        }
      }
    }
  }

  .section_detail {
    position: absolute;
    overflow-y: scroll;
    bottom: 0;
    top: 107px;
    left: 290px;
    right: 20px;

    .components_name {
      font-size: 28px;
      color: #404040;
      font-weight: 700;
      line-height: 40px;
      margin-bottom: 24px;
      margin-top: 8px;
      font-family: lato, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    }

    .components_desc {
      color: #314659;
      font-size: 14px;
    }

    .components_example {
      .clear();

      .components_example_imitator {
        float: right;
        width: 377px;
        height: 617px;
        margin-top: 45px;

        .components_example_imitator_head {
          border-radius: 4Px 4Px 0 0;
          background: -webkit-gradient(linear, left top, left bottom, from(rgba(55, 55, 55, 0.98)), to(#545456));
          background: -webkit-linear-gradient(rgba(55, 55, 55, 0.98), #545456);
          background: linear-gradient(rgba(55, 55, 55, 0.98), #545456);
          text-align: center;

          .phone_head_statebar {
            height: 20px;
            margin-bottom: 4px;
            text-align: center;

            img {
              width: 350px;
              vertical-align: middle;
            }
          }

          .phone_head_urlbar {
            width: 350px;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background-color: #a2a2a2;
            margin: 0 auto;
            border-radius: 4px;
            white-space: nowrap;
            overflow-x: scroll;

            &::-webkit-scrollbar {
              display: none;
            }
          }
        }
      }

      .components_example_partExp {
        padding-bottom: 20px;
        border: 0;
        width: 377px;
        height: 533px;
      }
    }

    .components_example_title {}

    .components_example_part {
      margin-top: 20px;
      width: 50%;
      border: 1px solid #ebedf0;
      padding: 20px;
      border-radius: 5px;

    }

    .components_example_part_code {
      .components_example_part_codeCode {
        overflow: hidden;
        margin-top: 20px;
        transition: all .5s ease 0s;
        max-height: 1000px;
        min-height: 520px;

        &.hide {
          max-height: 0;
        }
      }

      .components_example_part_codeTitle {
        color: #404040;
        font-size: 16px;

        span {
          float: right;
          cursor: pointer;
        }
      }
    }
  }

  .components_api {
    .components_api_prop {
      .components_api_prop_title {
        color: #404040;
        font-size: 16px;
        margin-top: 20px;
      }

      .components_api_prop_table {
        margin-top: 20px;
        display: table;

        .components_api_prop_table_row {
          display: table-row;

          .components_api_prop_table_cell {
            display: table-cell;
          }
        }
      }
    }

    .components_api_static {
      .components_api_static_title {
        color: #404040;
        font-size: 16px;
        margin-top: 20px;
      }

      .components_api_static_table {
        margin-top: 20px;
        display: table;

        .components_api_static_table_row {
          display: table-row;

          .components_api_static_table_cell {
            display: table-cell;
          }
        }
      }
    }
  }
}

.part_block {
  margin-top: 30px;

  .part_block_title {
    color: #404040;
    font-size: 22px;
  }
}

/*代码高亮*/

.hljs {
  padding: 0;

  &.components_example_part_codeCode_javascript {
    background-color: #fff;
    color: #666;

    .hljs-keyword {
      color: #008dff;
    }

    .hljs-string {
      color: #690;
    }

    .hljs-name {
      color: #bb0606;
    }

    .hljs-attr {
      color: #690;
    }

    .hljs-title {
      color: #666;
    }

    .hljs-keyword,
    .hljs-string,
    .hljs-name,
    .hljs-attr,
    .hljs-title {
      font-weight: lighter !important;
    }
  }
}

//间距样式调整
.wdmb-space {
  margin-right: 15px !important;
}

.wdmb-blank {
  margin-bottom: 15px !important;
}